<template>
    <div class="landing-page">
        <div class="ui middle aligned centered compact grid carousel">
            <img class="image" src="/static/img/banner.jpg" alt="">
            <div class="ui two wide centerd aligned column">
                <h1 class="ui inverted header">Bu Yue</h1>
                <p class="ui inverted content">抵 制 虚 拟 交 友</p>
                <div class="ui large blue button" @click="$router.push('schedule')">开启</div>
            </div>
        </div>
        <div class="ui section hidden divider"></div>
        <div class="ui container">
            <h4 class="ui centered header">相遇本是偶然</h4>
            <div class="ui hidden divider"></div>
            <div class="ui grid">
                <div class="ui four column row" v-for="(arr, index) in iconData" :key="index">
                    <div class="column" v-for="(item, index) in arr" :key="index">
                        <div class="ui raised card">
                            <div class="content">
                                <div class="header">{{item.title}}</div>
                                <div class="meta">
                                    <span class="category">{{item.meta}}</span>
                                </div>
                                <div class="description">
                                    <p>{{item.desc}}</p>
                                </div>
                            </div>
                            <div class="extra content">
                                <div class="right floated author">
                                    <img class="ui avatar image" :src="item.img">{{item.name}}
                                </div>
                            </div>
                        </div>
                    </div>                                
                </div>
            </div>
        </div> 
    </div>
</template>
<script>
export default {
    data () {
        return {
            iconData: [[
                {
                    job: '广告优化师',
                    title: '电影Her里的那个虚拟女友',
                    desc: '电影Her中的情景，总是一遍一遍的在我身上发生着，那些微信上的虚拟暧昧，现在看起来是多么可笑',
                    img: '/images/avatar/small/matt.jpg',
                    name: 'Matt'
                },
                {
                    meta: '广告优化师',
                    title: 'Jacky',
                    desc: ''
                },
                {
                    meta: '广告优化师',
                    title: 'Jacky',
                    desc: ''
                },
                {
                    meta: '广告优化师',
                    title: 'Jacky',
                    desc: ''
                }
            ]]
        }
    },
    mounted () {
        $('.special.card').dimmer({
            on: 'hover'
        })
    },
    created () {
        
    },
    methods: {

    }
}
</script>
<style scoped lang="stylus">
.carousel
    position: relative;
    height: 700px;
    color: white;
    img
        position absolute
        left 0; right 0; top 0; bottom 0;
        width: 100%
        height 100%
        object-fit cover
        z-index -1
</style>
